<template>
    <div>
        <van-tabbar v-model="active" active-color="#5CA1EE" @change="tabberClick()">
            <van-tabbar-item>
                <span>营养中心</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.normal"/>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>购物车</span>
                <img slot="icon" slot-scope="props1" :src="props1.active ? icon1.active : icon1.normal"/>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>个人中心</span>
                <img slot="icon" slot-scope="props2" :src="props2.active ? icon2.active : icon2.normal"/>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant'
export default {
    props:['tabberActive'],
    data(){
        return{
            active:0,
            icon: {
                normal: 'http://47.92.219.64/ysyy/public/static_wap/img/home.png',
                active: 'http://47.92.219.64/ysyy/public/static_wap/img/home-active.png'
            },
            icon1: {
                normal: 'http://47.92.219.64/ysyy/public/static_wap/img/tab-gwc.png',
                active: 'http://47.92.219.64/ysyy/public/static_wap/img/tab-gwc-active.png'
            },
            icon2: {
                normal: 'http://47.92.219.64/ysyy/public/static_wap/img/center.png',
                active: 'http://47.92.219.64/ysyy/public/static_wap/img/center-active.png'
            }
        }     
    },
    components:{
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem,
    },
    mounted(){
        this.active = this.tabberActive
    },
    methods:{
        tabberClick(){
            if(this.active == 0){
                this.$router.push({
                    name:'index'
                })
            }else if(this.active == 1){
                this.$router.push({
                    name:'shoppingCart',
                })
            }else{
                this.$router.push({
                    name:'center',
                })
            }
        }
    }
}
</script>
<style lang="less" scoped>
.van-tabbar{
    height: 130px;
    .van-tabbar-item{
        .van-tabbar-item__icon{
            img{
                width: 50px;
                height: 50px;
                margin-bottom: 10px;
            }
        }
    }
}
</style>


